Skip to main content

First Drawings

width and height​

width and height are built-in variables that allow you to access the size of the sketch at any time. You will see me use them all the time, and you should really be using them to position your shapes relatively inside the canvas.
For example (width/2, height/2) corresponds to the center of the canvas.

The coordinate system​

tip

Important to note: the y-axis is pointing down!
(0, 0) is the top-left of the canvas.

If you prefer having (0, 0) as the center of the canvas, you can do translate(width/2, height/2) before your start drawing. And to make the y-axis point up, also add scale(1, -1)

Shapes​

p5 knows how to draw quite a few shapes! We will take a look at the most common ones here but remember that you can find them all at https://p5js.org/reference/.

ellipse​

Ellipses are circles that can be wider in one direction (just like rectangles are squares that can be wider in one direction).

We specify them by giving the center x and y, and then the diameter (or two diameters if we want to have different sizes along the x and y axes).

rect​

Rectangles use almost the same parameters as Ellipses. The big difference though is that the first two parameters are (by default) the coordinates of the top-left corner, not the center! (You can change this with the rectMode function)

Colors​

tip

fill(...) is used to color the inside of the shape, and stroke(...) is used for its boundary.
If you don't want any stroke, you can remove it by calling noStroke(). And you can remove the fill by calling noFill().

The default way of specifing a color is by giving its RGB values. For example fill(255, 145, 23) will give some nice orange. (You can make so that fill uses HSB or HSL values instead of RGB with the colorMode function).

You can also use an hexadecimal string like "#FF9117" or a CSS color name like "orange".

Note that the colors you specify remain until you change them. So for example this will draw both the ellipse and the rectangle in orange:

The last (important) one in the family is strokeWeight(...). It controls the thickness of the stroke, which is also the size of points and lines.
It has a value of 1 by default.

Exercises​

Exercises